<template>
    <div class="yv-input-box">
        <span class="yv-input-error-info">{{ error }}</span>
        <input class="yv-input" :class="{ 'yv-input-error': error != null && error != '' }"
            @input="$emit('update:modelValue', $event.target.value)" name="yv-input" id="yv-input" :type="type"
            :value="modelValue" :placeholder="placeholder" />
        <span class="yv-input-label"
            :class="{ 'yv-input-required': required, 'yv-input-top': modelValue != null && modelValue != '', 'yv-input-error-label': error != null && error != '' }">
            {{ label }}
        </span>
    </div>
</template>

<script>
export default {
    name: 'YvInput',
    props: {
        required: {
            type: Boolean,
            default: false,
        },
        label: {
            type: String,
            default: '文本',
        },
        modelValue: {
            default: null,
        },
        type: {
            type: String,
            default: 'text',
        },
        placeholder: {
            type: String,
            default: '',
        }
    },
    emits: ['update:modelValue'],
    data() {
        return {
            error: null,
        }
    },
    methods: {
        onChange(e) {
            console.log(e)
            this.value.value = e.target.value
        },
    },
}
</script>

<style>
.yv-input {
    display: flex;
    width: 100%;
    margin: 0;
    border-radius: 3pt 3pt 0 0;
    font-size: 12pt;
    padding: 3pt 2pt;
    background: rgba(0, 0, 0, .01);
    color: rgb(73, 73, 73);
    border: none;
    border-bottom: 1pt solid rgb(161, 161, 161);
}

.yv-input:focus-visible {
    border-bottom: 1pt solid var(--yv-link-color);
    color: var(--yv-link-color);
    outline: none;
}

.yv-input-box {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column-reverse;
    margin: 0 auto;
}

.yv-input-label {
    text-align: left;
    justify-content: left;
    display: flex;
    font-size: 12pt;
    position: relative;
    color: rgb(94, 94, 94);
    z-index: -1;
}


.yv-input:focus-visible+.yv-input-label {
    color: var(--yv-link-color);
}

.yv-input-error {
    color: red;
    border-bottom: 1px solid red;
}

.yv-input-error-label {
    color: red;
}

.yv-input-error-info {
    position: absolute;
    right: 0pt;
    top: 3pt;
    font-size: 10pt;
    color: rgb(228, 0, 0);
}
</style>